<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="./js/sethtmlfontSize.js"></script>
</head>
<body>
    <header class="searchs">
        <div class="search-left">
            <i></i>
        </div>
        <div class="search-center">
            商品详情
        </div>
        <div class="search-right">
           <span id="collect" class="collect"> 收藏夹</span>
           <span id="login">登录</span>
        </div>
        <div class="clears"></div>  
    </header>
    <div id="center">
        <div class="show">
            <img class="bigimg" src="images/h1.png" alt="">
        </div>
        <div class="detail-style">
            <div class="detail-name">
                <div class="detail-name-l">
                     <p class="p1">时尚婚纱摄影——艺匠婚纱</p>
                     <p class="p2">6999元/次</p>
                </div>
            </div>
            <div class="money-style">
               <div class="money-style-l">
                   <img class="img1" src="images/xuanzhong_pre.png" alt="">
                  
                   <span class="span1">配送</span>
                    &nbsp; 
                   <img class="img1" src="images/xuanzhong_pre.png" alt="">
                   <span class="span1">支持微信支付</span>
                    &nbsp;
                   <img class="img1" src="images/xuanzhong_pre.png" alt="">
                   <span class="span1">支持支付宝支付</span>
                    &nbsp; 
               </div>
            </div>
            <div class="detail-reg">
               <div class="detail-reg-l">
                   <div class="detail-reg-r">
                     <span class="span2">商家认证资料</span>
                       <img class="img2" src="images/registered_top_icon_back-拷贝-10.png" alt="">
                   </div>
               </div>  
            </div>
        </div>
        <div class="introduce">
            <div class="introduce-a">
               <div class="introduce-l">
                    <img class="img3" src="images/hri.png" alt="">
                    <span class="introduce-name">艺匠婚纱摄影店</span>
                    <img class="img2" src="images/registered_top_icon_back-拷贝-10.png" alt="">
                </div>
            </div>
            <div class="business">
                    <div class="business-addr">
                        <img class="addr-tag" src="images/address.png" alt="">
                        <p class="addr-p">地址：龙华新区清湖地铁站福帽新村46号（清湖地铁站A出口向前50米，然后左转20米）</p> 
                        <p class="addr-dis">距离：500m</p> 
                        <div class="clears"></div>               
                     </div>
                     <div class="business-time">
                         <img class="time-tag" src="images/time_icon.png" alt="">
                        <p class="time-p">营业时间： 9：00———12:00</p>
                        <div class="clears"></div>
                     </div>
                    
                     <div class="shop-detail">
                        <div class="tel-detail details">
                            <img src="./images/phone_icon.png" alt="">
                            <span  class="det-s">电话:</span>
                            <i class="tel">0755-28765469</i>
                        </div>
                        <div class="stat-detail">
                            <ul class="stat-ul">
                                <li class="num-collect">
                                    <span class="num-top">115</span>
                                    <span class="num-bottom">收藏人数</span>
                                    <i></i>
                                </li>
                                <li class="num-visit">
                                    <span class="num-top">115</span>
                                    <span class="num-bottom">浏览数</span>
                                    <i></i>
                                </li>
                                <li class="num-goods">
                                    <span class="num-top">115</span>
                                    <span class="num-bottom">商品数</span>
                                </li>
                                
                            </ul>
                            <div class="clears"></div>
                            <div class="collection">
                                <span class="collection-l clo36c">收藏店铺</span>
                                <span class="collection-l collection-r clfff">进入店铺</span>
                            </div>
                        </div>
                     </div>
            </div>
        </div>
        <div class="person">
            <div class="person-tro">
                <p class="person-p">详细介绍：</p>
                <p class="person-p1">戈壁落日很大，泛黄古旧，半透明，边缘清晰如纸剪。此时起了风。西北一有风则苍劲，芨芨草用力贴紧了地，细沙水汽一般游走，从太阳那边扑面而来，所以感到风因太阳而起；恍惚之间，太阳说没了就没了，一身鬼气。</p>
                
            </div>
        </div>
        <div class="picture">
            <hr class="hr-l">
            <span class="picture-line">图片详情</span>
            <hr class="hr-r">
        </div>
        <div class="pic-show">
            <div class="pic-show-l">
                <img class="person-img" src="images/person.png" alt="">
            </div>
        </div>
        
        <div class="pic-show">
            <div class="pic-show-l">
                <img class="person-img" src="images/person.png" alt="">
            </div>
        </div>
        
            <!--商家的资料-->
        <div id="shop-regi">

        </div>
        <div id="content">
              <div class="big-image">
                  <img class="big-images" src="images/shop-header.png" alt="">
              </div> 
              <div class="small-image">
                 <div class="small-content">
                     <img class="small-images" src="images/shop-header.png" alt="">
                 </div>
                 <div class="shop-name">
                     <p class="name">艺匠婚纱摄影</p>
                     <i class="trange"></i>
                 </div>
              </div>
              <div class="resource-show">
                  <div class="resource-show-l">
                      <p>认证资料</p>
                      <div class="resource-show-r">
                          <div class="open">
                              <p class="open-l"><img class="open-l-image" src="images/xuanzhong_pre.png" alt=""><span class="span-r">营业执照</span></p>
                              <div class="resource-pic">
                                  <img class="resource-pic1" src="images/list1.png" alt="">
                              </div>
                              <div class="click">
                                  点击查看
                              </div>
                          </div>
                          <div class="resource-show-r">
                          <div class="open">
                              <p class="open-l"><img class="open-l-image" src="images/xuanzhong_pre.png" alt=""><span class="span-r">营业执照</span></p>
                              <div class="resource-pic">
                                  <img class="resource-pic1" src="images/list1.png" alt="">
                              </div>
                              <div class="click">
                                  点击查看
                              </div>
                          </div>
                          
                      </div>
                  </div>
              </div>

        </div>
    </div>
    </div>
    <div id="footer">
        <div class="foot-span">
            <span class="message foot1"><img class="foot-img" src="images/xiaoxi_icon.png" alt=""><span class="hw">发消息</span> </span>
            <span class="tell foot1"><img class="foot-img" src="images/dianhua_icon.png" alt=""><span class="hw">打电话</span> </span>
        </div>
    </div>
    

</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
    $(function(){
         var value="0";
        var doc=document.documentElement||document;     
//          $(".detail-reg-l").click(function(){
//              value="1";
//              $("#shop-regi").css("display","block");
//              $("#content").css("display","block");
//              $(".detail-reg-l").attr("data-data",value);
//              if(value==1){
//                document.documentElement.style.overflow='hidden';
//              }
//          });
//          $("#shop-regi").click(function(){
//              $("#shop-regi").css("display","none");
//              $("#content").css("display","none");
//              value="0"
//              $(".detail-reg-l").attr("data-data",value);
//              if(value==0){
//                document.documentElement.style.overflow='visible';
//              }
//          });
        
        function toggleInfo(tagElement,displayStr,overflowStr){
            $(tagElement).on("click",function(){
                  value="0"
                  $("#shop-regi").css("display",displayStr);
                  $("#content").css("display",displayStr);  
                  $(".detail-reg-l").attr("data-data",value);
                  if(value==0){
                    doc.style.overflow=overflowStr;
                  }
            });  
        }
        toggleInfo(".detail-reg-l","block","hidden");
        toggleInfo("#shop-regi","none","visible");

    });
  
</script>
</html>